<template>
	<view>
		<!-- 内容 -->
		<view class='pa'>
		
		<view class='container bg-white shadow-warp'  v-for="(item,index) in product_lists" :key="index">
		
		<view class='container-top'>
			<view class='container-top-1'><image :src="item.imgs[0]"></image></view>
			<view class='container-top-2'>
			<view class='container-top-2_1 text-cut'><text>{{item.product_title}}</text></view>
			<view class='container-top-2_2'><text class='text-price text-sm text-red'>{{item.price}}</text></view>
			<view class="" v-if="!item.is_persuaded">
				<view v-if="!item.is_finished"><text class='cuIcon-time lg text-gray'></text><text class='text-xxm'>等待卖出</text></view>
			</view>
			<view class="" v-if="item.is_persuaded">
				<view v-if="!item.is_finished"><text class='cuIcon-time lg text-gray'></text><text class='text-xxm'>等待交易完成</text></view>
				<view v-if="item.is_finished">✅<text class='text-xxm'>交易已完成</text></view>
			</view>
		
		</view>
		
		</view>
		
		<view class='container-line'></view>
		
		<view class='container-under'  v-if="item.is_persuaded&&!item.is_finished">
		<view  class='container-under-1' @tap="toChat(item.buyer_id,item.buyer_name,item.buyer_icon)"><text class='cuIcon-message font-size-lg text-black '></text><text class='text-sm text-black'>联系买家</text></view>
		<view class='container-under-2' @tap="showAddress(item.buyer_id)"><view class="cu-tag line-black padding check_finish">查看买家收获地址</view></view>
		<!-- <view><view class="cu-tag line-black padding">…</view></view> -->
		</view>
		
		</view>
		
		</view>
		
		<!-- end -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				product_lists:[],
				user_id:""
			}
		},

		onLoad:function(options){
			this.user_id=options.user_id;
			//this.product_lists
			
			this.getProducts();
		},
		// onShow:function(){
		// 	uni.setTabBarBadge({
		// 	  index: 2,
		// 	  text: store.chats_count.toString()
		// 	})

			
		// },
		// //上拉刷新
		// onPullDownRefresh:function() {
		// 	//模拟加载完成
		// 	this.page=1;
		// 	this.product_lists=[];
		// 	this.getProducts(parseInt(this.page),10);
		// 	setTimeout(function() {
		// 		uni.stopPullDownRefresh();
		// 	}, 50);
		// },
		//上拉刷新
		// onReachBottom:function(){
		// 	console.log("出发上拉刷新事件");
		// 	this.page++;
		// 	this.getProducts(parseInt(this.page),10);
		// },
		methods: {
			getProducts(){
					var that=this;
				uni.showLoading();
				

					uniCloud.callFunction({
						name:"getSaleProducts",
						data:{
							"user_id":that.user_id,
						},
						success(res) {
							uni.hideLoading();
							let l=res.result.products;
							for(let i=0; i<l.length; i++){
								for(let j=0; j<l[i].imgs.length; j++){
									l[i].imgs[j]="https://7463-tcb-ifefi2k5rw3qd7x53f623-663bf2-1303864694.tcb.qcloud.la/"+l[i].imgs[j];
								}
							}
							if(l.length!=0){
								that.product_lists=that.product_lists.concat(l);
							}
							
						}
					})

				},
			toChat:function(id,name,icon){
				 uni.navigateTo({
					url:"/pages/msg/msg_chat/msg_chat?friend_id="+id+"&friend_name="+name+"&icon="+icon
				 })
			},
			showAddress(buyer_id){
				uni.navigateTo({
					url:"../buyer-address/buyer-address?buyer_id="+buyer_id
				})
			}	
			  // toProductDetail(id){
				 //  uni.navigateTo({
				 //  	url:"home_detail/home_detail?_id="+id
				 //  })
			  // },
				  
				


		}
	}
</script>

<style scoped>
/* pages/my/my_sale/my_sale.wxss */

.pa{
  padding: 20rpx;
}
.check_finish{
	background: #F43F3B !important;
	color: white !important;
}
/* 内容 */
.container{
  padding: 20rpx;
  height: 300rpx;
  width: 100%;
  margin-bottom: 20rpx;
}
.container-top-2 {
  margin-left: 20rpx;
  width: 120%;

}
.container-top-1 image{
  width: 150rpx;
  height: 150rpx;
}
.container-top{
  display: flex;
  align-items: center;

}
.container-top-2_1{
  margin-bottom: 20rpx;
  width: 50%;
}
.container-top-2_1 text{
  font-weight: 600;
}
.container-top-2_2{
  margin-bottom: 20rpx;
}
.container-top-2_2 text{
  font-size: 25rpx;
  font-weight: 750;
}
.text-xxm{
  font-size: 22rpx;
  color: gray;
  padding-left: 10rpx;
}
.container-line{
  width: 95%;
  height: 3rpx;
  background: gainsboro;
  margin-top: 25rpx;
}
.container-under{
  display: flex;
  margin-top: 25rpx;
  align-items: center;
}
.font-size-lg{
  font-size: 35rpx;
  padding-right: 10rpx;

}
.container-under-1{
width: 65%;
}
.container-under-2{
  margin-right: 20rpx;
}
/* end */
</style>
